<script>

export default {
    name: "App"
}
</script>

<template>
    <div class="container">
        <nav>
            <router-link exact active-class="active" to="/">首页</router-link>|
            <!--    exact-active-class="active" 相当于：active-class="active" exact        -->
            <router-link  exact-active-class="active" to="/">首页</router-link>|
            <!--   active-class="active" 非精确匹配生效         -->
            <router-link active-class="active" to="/goodsList">商品列表</router-link>|
            <router-link  active-class="active" to="/newsList">新闻列表</router-link>|
            <router-link active-class="active" to="/my">我的个人中心</router-link>
        </nav>
        <router-view name="One"></router-view>
        <router-view name="Two"></router-view>
        <router-view></router-view>
    </div>
</template>

<style scoped lang="less">
.container{
    text-align: center;
    a{
        margin:10px;
        color:skyblue;
        &.active{
            color:red;
        }
    }
}
</style>